import { StyleSheet } from "react-native";

const styles = StyleSheet.create({
  scanFrame: {
    position: "absolute",
    width: "80%",
    height: "40%",
    top: "30%",
    left: "10%",
    backgroundColor: "rgba(0,0,0,0.2)",
    borderRadius: 16,
    borderWidth: 2,
  },
  corner: {
    position: "absolute",
    width: 24,
    height: 24,
  },
  topLeft: {
    top: -2,
    left: -2,
    borderLeftWidth: 4,
    borderTopWidth: 4,
    borderTopLeftRadius: 8,
  },
  topRight: {
    top: -2,
    right: -2,
    borderRightWidth: 4,
    borderTopWidth: 4,
    borderTopRightRadius: 8,
  },
  bottomLeft: {
    bottom: -2,
    left: -2,
    borderLeftWidth: 4,
    borderBottomWidth: 4,
    borderBottomLeftRadius: 8,
  },
  bottomRight: {
    bottom: -2,
    right: -2,
    borderRightWidth: 4,
    borderBottomWidth: 4,
    borderBottomRightRadius: 8,
  },
  controlsContainer: {
    position: "absolute",
    bottom: 40,
    flexDirection: "row",
    justifyContent: "space-around",
    width: "100%",
  },
  controlButton: {
    alignItems: "center",
    padding: 12,
    borderRadius: 12,
    margin: 8,
  },
  controlText: {
    marginTop: 8,
    fontSize: 12,
  },
  container: {
    flex: 1,
    justifyContent: "center",
  },
  message: {
    textAlign: "center",
    paddingBottom: 10,
  },
  camera: {
    flex: 1,
  },
  torchIconContainer: {
    flex: 14,
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "flex-end",
    backgroundColor: "transparent",
  },
  torchIcon: {
    flex: 1,
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "transparent",
  },
  torchText: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "transparent",
  },
  tipContainer: {
    flex: 2,
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "flex-end",
    backgroundColor: "transparent",
    margin: 42,
  },
  text: {
    flex: 2,
    marginBottom: 12,
    alignSelf: "flex-end",
    textAlign: "center",
    fontSize: 14,
    fontWeight: "bold",
  },
  usePhoto: {
    position: "absolute",
    bottom: 0,
    right: 0,
  },
  iconContainer: {
    width: 40,
    height: 40,
    borderRadius: 20,
    justifyContent: "center",
    alignItems: "center",
  },
  scanLine: {
    position: "absolute",
    left: 0,
    right: 0,
    height: 2,
    backgroundColor: "transparent",
  },
  button: {
    alignItems: "center",
    padding: 10,
    borderRadius: 8,
    margin: 5,
  },
  buttonText: {
    marginTop: 4,
    fontSize: 12,
  },
  controls: {
    position: "absolute",
    bottom: 30,
    left: 0,
    right: 0,
    flexDirection: "row",
    justifyContent: "space-evenly",
    padding: 10,
  },
  distanceTip: {
    position: "absolute",
    bottom: -40,
    left: 0,
    right: 0,
    textAlign: "center",
    fontSize: 14,
    fontWeight: "500",
  },
});

export default styles;
